/**
 * Created by fanweihua on 2016/12/3.
 */
import React from 'react';
import ToastHtml from './toastHtml.js';

const Toast = React.createClass({
    getInitialState: function () {
        return {
            html: ToastHtml.html,
            javaScriptHtml: ToastHtml.javaScriptHtml,
        };
    },
    render(){
        return (
            <div className="Z_slideIn">
                <div className="page slideIn">
                    <div className="Z_content_code">
                        <div dangerouslySetInnerHTML={{__html: this.state.html}}></div>
                        <div dangerouslySetInnerHTML={{__html: this.state.javaScriptHtml}}></div>
                    </div>
                </div>
                <div className="Z_content">
                    <div className="Z_panel-body-backgound">
                        <ToastNav></ToastNav>
                    </div>
                </div>
            </div>
        )
    }
});
module.exports = Toast;
const ToastNav = React.createClass({
    componentDidMount: function () {
        ToastHtml._go();
        $(".weui-toast").css({
            "position": "absolute"
        });
    },
    render(){
        return (
            <div className="Z_panel-body">
                <div className="page__hd">
                    <h1 className="page__title">Toast</h1>
                    <p className="page__desc">弹出式提示</p>
                </div>
                <div className="page__bd page__bd_spacing">
                    <a href="javascript:;" className="weui-btn weui-btn_default" id="showToast">成功提示</a>
                    <a href="javascript:;" className="weui-btn weui-btn_default" id="showLoadingToast">加载中提示</a>
                </div>
                <div id="toast" style={{display: "none"}}>
                    <div className="weui-mask_transparent"></div>
                    <div className="weui-toast">
                        <i className="weui-icon-success-no-circle weui-icon_toast"></i>
                        <p className="weui-toast__content">已完成</p>
                    </div>
                </div>
                <div id="loadingToast" style={{display: "none"}}>
                    <div className="weui-mask_transparent"></div>
                    <div className="weui-toast">
                        <i className="weui-loading weui-icon_toast"></i>
                        <p className="weui-toast__content">数据加载中</p>
                    </div>
                </div>
            </div>
        );
    }
});